<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>JMX Mini Console</title>    
    
    <link rel="stylesheet"
            href="js/dojotoolkit/dijit/themes/nihilo/nihilo.css" />
    
    <style type="text/css">
        @import "js/dojotoolkit/dojox/grid/resources/Grid.css";
        @import "js/dojotoolkit/dojox/grid/resources/nihiloGrid.css";
        .dojoxGrid table {
        margin: 0;
        }
       
		html, body { background-color: white; font-family: Tahoma, Helvetica; font-size: 8pt; margin:0px; width: 99%; height: 100%; }
		.servers{
    		background: url("js/servers.gif") no-repeat scroll left top transparent;
		}
		.server{
    		background: url("js/server.gif") no-repeat scroll left top transparent;
		}
		.domains{
    		background: url("js/domains.png") no-repeat scroll left top transparent;
		}
		.domain{
    		background: url("js/domain.gif") no-repeat scroll left top transparent;
		}
		.mbeans{
    		background: url("js/mbeans.gif") no-repeat scroll left top transparent;
		}
		.mbean{
    		background: url("js/mbean.gif") no-repeat scroll left top transparent;
		}
		.attributes{
    		background: url("js/attributes.png") no-repeat scroll left top transparent;
		}
		.attribute{
    		background: url("js/attribute.gif") no-repeat scroll left top transparent;
		}
		.operations{
    		background: url("js/operations.gif") no-repeat scroll left top transparent;
		}
		.operation{
    		background: url("js/operation.gif") no-repeat scroll left top transparent;
		}
		.undefined{
    		background: url("js/undefined.gif") no-repeat scroll left top transparent;
		}
    </style>

    <!-- load the dojo toolkit base -->
<!--    <script type="text/javascript" src="dojo.js" djConfig="blankGif:'blank.gif'"></script>
 -->
    <script type="text/javascript" src="js/dojotoolkit/dojo/dojo.js"
        djConfig="parseOnLoad:true,locale:'en'"></script>

    <script type="text/javascript"> 
    
    dojo.require("dijit.Tree");
    dojo.require("dojox.data.JsonRestStore");
    dojo.require("dijit.layout.BorderContainer");
    dojo.require("dijit.layout.ContentPane");
    dojo.require("dojox.grid.DataGrid");
    dojo.require("dojo.data.ItemFileReadStore");
    dojo.require("dojox.rpc.Rest");
    dojo.require("dojox.rpc.JsonRest");

    dojo.addOnLoad(function(){

        dijit._Widget._blankGif="blank.gif";

        var store = new dojox.data.JsonRestStore({
            target:"servers/"
        });
        
        var model = new dijit.tree.TreeStoreModel({
            query: "",
            store:  store
        });

	// Override to support erroneous children (e.g. 403)
	model.getChildren = function(/*dojo.data.Item*/ parentItem, /*function(items)*/ onComplete, /*function*/ onError){
			// summary:
			// 		Calls onComplete() with array of child items of given parent item, all loaded.

			var store = this.store;

			// get children of specified item
			var childItems = [];
			for (var i=0; i<this.childrenAttrs.length; i++){
				var vals = store.getValues(parentItem, this.childrenAttrs[i]);
				childItems = childItems.concat(vals);
			}

			// count how many items need to be loaded
			var _waitCount = 0;
			dojo.forEach(childItems, function(item){ if(!store.isItemLoaded(item)){ _waitCount++; } });

			if(_waitCount == 0){
				// all items are already loaded.  proceed...
				onComplete(childItems);
			}else{
				// still waiting for some or all of the items to load
				var onItem = function onItem(item){
					if(--_waitCount == 0){
						// all nodes have been loaded, send them to the tree
						onComplete(childItems);
					}
				}
				dojo.forEach(childItems, function(item){
					if(!store.isItemLoaded(item)){
						store.loadItem({
							item: item,
							onItem: onItem,
							onError: onItem
						});
					}
				});
			}
		}

        var tree = new dijit.Tree({
            model: model,  
                onClick: function(item,node){
                	grid.startup();
            		if(item.__id=="servers/servers/#0") {
            			dojo.byId("path").innerHTML="servers/";
                    	dojo.byId("path").href="servers/";
            		} else { 
                    	dojo.byId("path").innerHTML=item.__id.replace(/ /g,'&nbsp;');
                    	dojo.byId("path").href=item.__id;                    	
            		}
                    	
					if(item.__id.indexOf("attributes")==-1 && item.__id.indexOf("operations")==-1) {		
						hideAll();
						grid.setStore(new dojo.data.ItemFileReadStore({data :  { items: [] }}));						
						return;
					}                   
					
					if(item.children && item.children instanceof Array) {						
						var items=[];
						var counter=item.children.length;
						for(var i=0; i<item.children.length; i++){
							dojox.rpc.Rest._index[item.children[i].__id]=null;
											
							dojox.rpc.JsonRest.fetch(item.children[i].__id).addCallback(function(value){	
								items.push(value);    
								counter--;
								if(counter==0) {
									items.sort(function(x, y) { return ((x.label < y.label) ? -1 : ((x.label > y.label) ? 1  : 0));  });
									grid.setStore(new dojo.data.ItemFileReadStore({data :  { items: items }}));									
								}								
							});
						}						
						showGrid(); 
																			  
				    } else{
				    	dojox.rpc.Rest._index[item.__id]=null;
				    	dojox.rpc.JsonRest.fetch(item.__id).addCallback(function(value){
				    			grid.setStore(new dojo.data.ItemFileReadStore({data : { items: [value] }}));
				    		});				    	
				    	document.getElementById("frame").src=item.__id+"?skin=embedded";
				    	showFrame();
					}											
                },
                onDblClick: function(item,node){
                    window.open(item.__id);
                },
                onOpen: function(item,node){
                	var children = node.getChildren();
                    if(children && children.length==1) {
                        var node=children[0];
                        if (node.isExpandable && !node.isExpanded)
                        {
                        	dijit.byId('tree')._expandNode(node);
                        }
                    }
                },
                getIconClass: function(/*dojo.data.Item*/ item, /*Boolean*/ opened){
                    if(item.__id=="servers/servers/#0") {
                    	return "servers";
                    }                
                    levelString = item.__id;
                    levelString = levelString.substring(0,levelString.length-1);
                	level=levelString.split('/').length;                	
                    if(item.label==null) {
                    	return "undefined";
                    }
                    switch(level) {
                    case 1: return "servers";
                    case 2: return "server";
                    case 3: return "domains"; 
                    case 4: return "domain";
                    case 5: return "mbeans"; 
                    case 6: return "mbean";
                    case 7: 
                    	if(item.__id.indexOf("attributes")!=-1) {
                    		return "attributes";
                    	} else {
                    		return "operations";
                    	}
                    case 8: 
                    	if(item.__id.indexOf("attributes")!=-1) {
                    		return "attribute";
                    	} else {
                    		return "operation";
                    	}
                    default: return "undefined"
                    }
            	}
             },
            "tree");        
                   // set the layout structure:
        var layout = [
            { field: 'label', name: 'Item', width: '50%' },
            { field: 'value', name: 'Value', width: 'auto' }
        ];

        // create a new grid:
        var grid = new dojox.grid.DataGrid({
                query: { label: '*' },
                store: new dojo.data.ItemFileReadStore({data :  { items: [] }}),
            clientSort: false,
            structure: layout,
            height:'100%',
            style: "font-size:8pt;font-family:Tahoma,Helvetica;",
            onRowDblClick: function(event){
                    window.open(grid.getItem(event.rowIndex).__id);
                },
            onRowClick: function(event){
		    	document.getElementById("frame").src=grid.getItem(event.rowIndex).__id+"?skin=embedded";
            	showFrame();
            }
        }, "grid");

    });


    function resize_iframe()
    {

    	var height=window.innerWidth;//Firefox
    	if (document.body.clientHeight)
    	{
    		height=document.body.clientHeight;//IE
    	}
    	//resize the iframe according to the size of the
    	//window (all these should be on the same line)
    	document.getElementById("frame").style.height=parseInt(height-document.getElementById("frame").offsetTop-44)+"px";
    }

    // this will resize the iframe every
    // time you change the size of the window.
    window.onresize=resize_iframe; 
    
    function showFrame() {
		document.getElementById("grid").style.display='none';		
		document.getElementById("frame").style.display='block';
		document.getElementById("right").style.border="0px";
		resize_iframe();
    }
    
    function showGrid() {
		document.getElementById("frame").style.display='none';						
		document.getElementById("grid").style.display='block';
		document.getElementById("right").style.border="1px solid #ccc";
		document.getElementById("frame").src="";
    }
    
    function hideAll() {
    	document.getElementById("frame").style.display='none';	
    	document.getElementById("grid").style.display='none';
    	document.getElementById("right").style.border="1px solid #ccc";
    	document.getElementById("frame").src="";
    }
    
    </script>
    
    </head>
    <body class="nihilo">
    <div dojoType="dijit.layout.BorderContainer" style="margin:0px; width: 100%; height: 100%; overflow: hidden;">
        <div dojoType="dijit.layout.ContentPane" style="overflow: hidden" region="top">
        <b><a href="http://www.jminix.org" style="text-decoration:none;color:black;">JMini<span style="color:red">X</span>&nbsp;Console</a></b>
        	<span style="padding-left:4px;background-color:white; position: absolute; right:8px;" ><a style="font-size:90%;" id="path" href="servers/">servers/</a></span>            
        </div>
        <div dojoType="dijit.layout.ContentPane" style="width: 50%;" region="leading" splitter="true">
            <div id="tree"></div>
        </div>
        <div id="right" dojoType="dijit.layout.BorderContainer" region="center" style="border: 1px solid #ccc;background-color:white;">
            <div id="grid" style="background-color:white;display: none"></div>
            <iframe frameborder="0" border="0" id="frame" style="width:100%;display: none"></iframe>
        </div>
    </div>

    </body>
</html>
